<script setup>
import { computed } from 'vue'
import Cloud from '@/assets/cloud.png'

const props = defineProps({
  size: {
    type: Number,
    default: 24
  },
  content: {
    type: Array
  }
})

const contentWithoutChildren = computed(() => {
  return props.content.filter((t) => !t.startsWith('儿童'))
})
</script>
<template>
  <div
    :style="{
      backgroundImage: `url(${Cloud})`,
      backgroundPosition: 'center',
      backgroundSize: 'contain',
      backgroundRepeat: 'no-repeat',
      height: 'fit-content',
      width: 'fit-content',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '50px 40px 10px 50px',
      flexDirection: 'column'
    }"
  >
    <span
      v-for="(item, index) in contentWithoutChildren"
      :key="index"
      :style="{
        fontSize: '20px',
        maxWidth: `${content.length >= 6 && content.length <= 12 ? '4em' : '8em'}`
      }"
      >{{ item }}</span
    >
  </div>
</template>
